<template>
  <el-table
      :data="tableData"
      height="400"
      style="width: 40%">
    <el-table-column
        prop="name"
        label="歌曲名"
        width="230">
    </el-table-column>
    <el-table-column
        prop="theArtists"
        label="作者"
        width="230">
    </el-table-column>
    <el-table-column
        label="操作栏">
      <template v-slot="scope">
        <el-button size="mini" @click="designatedPlay(scope.$index)" type="success" icon="el-icon-caret-right"
                   circle></el-button>
        <el-button size="mini" type="primary" icon="el-icon-folder-add" circle></el-button>
        <el-button size="mini" type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button size="mini" @click="deleteElement(scope.row,scope.$index)" type="danger" icon="el-icon-delete"
                   circle></el-button>
      </template>
    
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "playList",
  data() {
    return {
      tableData: this.$store.state.player.playlist
    }
  },
  created() {
  
  },
  methods: {
    async deleteElement(value, index) {
      await this.$store.dispatch('player/deleteOneSongMessage', value)
      this.$emit('userDeleteOneSong', index)
    },
    designatedPlay(value) {
      this.$emit('userDesignatedPlay', value)
    },
  },
}
</script>

<style scoped lang="less">
.el-table, .el-table__expanded-cell {
  border-radius: 20px;
  border: 2px solid #B2281E;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 5px 5px 40px #000000;
}

.el-table th, .el-table tr {
  background-color: rgba(0, 0, 0, 0.7);
}

/deep/ tr {
  background-color: rgba(0, 0, 0, 0);
}

/deep/ th.el-table__cell {
  background-color: rgba(0, 0, 0, 0);
}

/deep/ .el-table__cell {
  color: #ffffff;
  border-bottom: 0 !important;
  transition: all .3s linear;
  .cell{
    transition: all .3s linear;
  }
 
}

/deep/ .el-table__body tr:hover > td {
  background-color: rgba(0, 0, 0, 0) !important;
}

/deep/ .el-table__body tr {
  transition: all .3s linear;
}

/deep/ .el-table__body tr{
  &:hover {
    background-color: rgba(220, 19, 19, 0.5) !important;
    transform: translateY(-5px);
    box-shadow: 5px 5px 20px #B2281E;
    
    .el-table__cell{
      font-size: 16px;
    }
  }
}

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #B2281E;
  border-radius: 3px;
}
</style>
